<template>
  <div>
    <div class="titleBackgroundColor" :style="{ height:size120,lineHeight:size120}">
      <div class="n-title-text" :style="{fontSize:size30}">启帆的工作室</div>
    </div>
    <div class="workCardTitle" :style="{height: workCardTitleHeight180}">
        <div class="workCardTitlefontColor" :style="{paddingTop:marginTop55}">欢迎关注我的中医工作室</div>
         <div class="workCard-image-div" :style="{height:size160}">
          <img :src="head" class="workCard-head-Image" :style="{width:workCardheadImageSize125,height:workCardheadImageSize125,borderRadius: toBorderRadius,shapeOutSide: toShapeOutside}" ></img>
        </div>
        <div class="workCardNamefont" :style="{fontSize: size30}">郑洛恩</div>
        <hr color="#A52A2A" width="7%" :style="{size: size20,marginTop: size20}">
        <div class="hrStyle" :style="{fontSize: size25,marginTop: size20}">医师</div>
        <div :style="{fontSize: size25,marginTop: size20}">金东区临浦镇中心卫生院</div>
        <div :style="{marginLeft: size170,width: qrcodeMarginWidth,marginTop: size30}">
        <vue-qr :text="testUrl" :size="size" :colorDark="colorDark"></vue-qr>
        <div :style="{fontSize: size20,marginTop: size60,marginLeft:size60}">
            <div class="text1" :style="{marginTop: size20}">1:微信扫描上方二维码</div>
            <div class="text1" :style="{marginTop: size20}">2:关注【大家健康】公众号</div>
             <div  class="text1"  :style="{marginTop: size20}">3:微信向我发起在线咨询</div>
        </div>
      </div>
    </div>
     
  </div>
</template>
<script>
  import VueQr from 'vue-qr'
  import { fetchPatientListByDoctorId } from '@/api/course'
  export default {
    components: {
      VueQr
    },
    data () {
      return {
        testUrl: 'www.baidu.com',
        patientList: [],
        head: '../../../static/head.jpg',
        dcotorId: this.$route.query,
        colorDark: 'black'
      }
    },
    mounted () {
      this.getPatients(this.dcotorId)
    },
    computed: {
      size5 () {
        return this.clientWidth * 5 / 750 + 'px'
      },
      size20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      size25 () {
        return this.clientWidth * 25 / 750 + 'px'
      },
      size30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      size60 () {
        return this.clientWidth * 60 / 750 + 'px'
      },
      size70 () {
        return this.clientWidth * 70 / 750 + 'px'
      },
      size120 () {
        return this.clientWidth * 120 / 750 + 'px'
      },
      size160 () {
        return this.clientWidth * 160 / 750 + 'px'
      },
      size170 () {
        return this.clientWidth * 210 / 750 + 'px'
      },
      qrcodeMarginWidth () {
        return this.clientWidth * 320 / 750 + 'px'
      },
      workCardTitleHeight180 () {
        return this.clientWidth * 180 / 750 + 'px'
      },
      marginTop55 () {
        return this.clientWidth * 55 / 750 + 'px'
      },
      workCardheadImageSize125 () {
        return this.clientWidth * 125 / 750 + 'px'
      },
      toBorderRadius () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      toShapeOutside () {
        return this.clientWidth * 150 / 750 + 'px'
      }
    },
    methods: {
      getPatients (doctorId) {
        console.log(doctorId)
        fetchPatientListByDoctorId(doctorId).then(response => {
          this.patientList = response.data
        })
      }
    }
  }
</script>
<style lang="less" scoped>
 .workCardTitle{
  background-color: #A52A2A;
  text-align:center;
 }
 .workCardTitlefontColor {
   color: #FFCC66;
 }
 .text1 {
     float: left;
     color: #5b6175;
 }
 .hrStyle {
     color:#A52A2A;

 }
 .workCardNamefont {
     font-weight: bold;
 }
 .workCard-image-div {
     text-align: center;
 }
 .workCard-head-Image {
    border-color:#ffffff;
    border-style:solid;
    margin:10px auto;
    border-radius:50%;
  }
</style>
